home
***
CD-ROM
|
disk
|
FTP
|
other
***
search
/
Mac Magazin/MacEasy 25
/
Mac Magazin and MacEasy Magazine CD - Issue 25.iso
/
Grafik & Text
/
Alpha
/
Help
/
HTML Help
< prev
next >
Wrap
Text File
|
1996-08-18
|
65KB
|
1,546 lines
HTML mode version 1.2
by Johan Linde
August 1996
Use the marks menu [M] ------------------------------------------------- >>
to quickly jump to different sections of this file.
There is also a version of this manual in HTML format, with lots of screen
shots.
HTML Mode is for editing HyperText Markup Language documents (suffix
".html", ".htm" or ".shtml"). It is not a previewer, nor is it a verifier,
and you have to know at least some HTML to use it. If you do not know about
HTML, I recommend that you read "A Beginner's Guide to HTML". It is a good
first text to read. You can find it at
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
I have collected some other links to HTML guides, see the section on
HTML Tutorials and references.
The basic idea with this HTML environment is to save you time while typing,
by having key bindings for all HTML elements. Also, you do not have to
worry about misspelt HTML tags, missing end quotes, or missing end tags.
HTML mode is probably most useful for HTML programmers with some experience
of HTML, who are looking for an editor which makes the editing easier and
faster.
When you use this package, by default you will see bullet characters (•),
called "tab marks", being dribbled near where you insert elements. These
are supposed to be a feature. The tab key takes you to the next one, and
automatically deletes the bullet. Read the section "How to use tab marks",
to learn to use them in the best way.
===============================================================================
= HTML mode features
===============================================================================
• HTML mode knows HTML 3.2 as well as Netscape's extensions to HTML.
• Tools to easily and quickly insert HTML elements and give them
attributes. Each element has got its own key binding.
• Tools to easily change or remove HTML elements.
• Tools for building lists and tables.
• You can define colors with a color picker to use on your web pages.
• You can check that all links between your files are ok.
• You can move files between folders and automatically update all links
between and in them.
• Support for editing of JavaScript.
• Translation of special characters, å, ó, ü etc. to
and from their HTML entities.
• Files are sent to your browser with one key stroke.
• You can define new HTML elements. Therefore you don't have to wait for
Alpha to be updated to use it for new HTML.
• etc. etc.
Acknowledgment
First of all I would like to thank Pete Keleher for writing Alpha, the best
editor in the world, without my TCL code would be pretty useless. I am
also indebted to Scott Brim who wrote an earlier version of Alpha's HTML
mode. Some ideas and tcl code were taken from html.el for GNU Emacs and
latex.tcl for Alpha.
I want feedback! All comments on HTML mode are welcome.
In particular, please tell me
• about bugs of any kind,
• about some new feature you want to have included in the HTML mode,
• if you think some function behaves stupidly,
• if some HTML element is not defined correctly,
• if something is not explained well enough in this help file.
You may also tell me that you like HTML mode. :-)
If you want to hear about beta releases, send me a mail and
I will put you on the list.
Johan Linde <jl@theophys.kth.se>
If you like HTML mode and use it a lot, I would very much appreciate if you
send me a postcard and tell me that. It would give me new energy to add
new features to HTML mode. My address is
Johan Linde
Lojovägen 61
S-181 47 LIDINGÖ
SWEDEN
But don't give me credit for something I haven't done.
===============================================================================
= Language
===============================================================================
My mother tongue is Swedish. Therefore you will, no doubt, find
grammatical and other errors in this document and in HTML mode. Please
tell me about any such error you find, in a menu, dialog box, error
message...
But before you complain, I must tell you that I know that "color" is spelt
"colour". :-)
===============================================================================
= What's new in version 1.2
===============================================================================
• The package HTML 2.0 is removed, since it is out-dated. From now on
there will only be two packages, one with the latest official HTML and
one where extensions have been included.
• There is now only two way to input attributes, the dialogs introduced
in 1.1 and the status bar.
• Improved behavior when attributes are given in the status bar. ctrl-z to
cancel, ctrl-f for a file dialog or new color. When a value is chosen
from a popup window, Alpha immediately jumps to the next attribute.
• A new userfriendly way to add new HTML elements.
• A function to move files between folders and automatically update all
links to and in them.
• Changed JavaScript coloring. Only reserved words are colored, not built
in methods and properties. Comments in JavaScript are now colored.
• A window cache just like the URL cache. Frame names are automatically added
to this cache.
• A new submenu with plug-ins.
• JavaScript's event handlers can now optionally appear in the attribute dialog.
• Only one menu item for <A>.
• Added SRC to <SCRIPT>.
• Added <NOSCRIPT>, <MULTICOL> and <SPACER>.
• Added FRAMEBORDER, BORDERCOLOR to <FRAME>.
• Added FRAMEBORDER, BORDERCOLOR, BORDER to <FRAMESET>.
• Added FACE to <FONT>.
• Added onMouseOut to <A>.
• Added onAbort, onError, onLoad to <IMG>.
• Added onClick, onMouseOver, onMouseOut to <AREA>.
• When trying to add a link via a file dialog, windows with ' <n>' added to
the window name were asked to be saved even if they already were saved.
Fixed!
• Send file to browser didn't work for windows with ' <n>' appended. Fixed!
• Problems finding the browser fixed.
• Reveal color didn't find color attribute if color wasn't quoted. Fixed!
• Check links didn't find BASE if it was split into two lines. Fixed!
• Check links and cmd-double-click now correctly interpret paths of the form
"./file.html".
• Check links and cmd-double-click now search for a file index.html when a
link points to a folder.
• Check links didn't work for files with UNIX or IBM newlines. (All links
were found to be ok.) Fixed!
• Some lists couldn't be inserted when using the status bar. Fixed!
• 'Change opening' didn't work for INPUT elements in lower case. Fixed!
• The variable htmlElemAttrsForAll is no longer supported.
• Some other minor changes and bug fixes.
===============================================================================
= What's new in version 1.1.1
===============================================================================
• Rewrote some of the code so that HTML mode loads faster.
• The menu Use Attributes is disabled when it is not needed.
• Added <U> and <NOEMBED>.
• The new suffix mapping is used to determine if a file is a HTML file
when deciding which files to scan to check the links.
===============================================================================
= What's new in version 1.1
===============================================================================
• The HTML elements are put into three packages, HTML 2.0, HTML 3.2 and
Extensions.
• Support for JavaScript coloring and editing.
• A function to check that all links between files in your home page are ok.
• Attributes to an element can be input in one single dialog box,
rather that giving the attributes one after another.
• When you are asked about an URL attribute, you can choose a file via a
file dialog. The relative path is automatically inserted.
• "Fill paragraph" is now sensitive to HTML elements.
• cmd-doubleclick on a relative URL opens the file, or if it does not
exits, it can create a new file and save it in the right place.
• You can define a new color when you are asked about a color attribute.
• You can define files with footers, which can be automatically inserted
when you create a new document.
• Control that a value given to a number attribute is valid.
• Control that a value given to a color attribute is valid.
• New dialog box for "New document" where you can choose which elements
you want in the head, and also select a file with a footer to insert in the
end of the body.
• Character translation can be done in a selection. The translation is also
a lot faster.
• Tab marks can be removed in a selection.
• "Select container" and "Untag" now find the correct pair of tags when
there are elements of the same kind within each other, like a <TABLE> within
a <TABLE>.
• "Select container" and "Untag" now ignores all tags without a closing tag.
• A function to select a tag with no closing tag.
• A function to untag a element with no closing tag.
• A function to untag a container and automatically select the content.
• A function to change an element in the document.
• New key binding for untag: ctrl-F1. It has been bundled with the new functions
just mentioned.
• Mark file now finds headers with opening and closing tags on different
lines. Each menu item is limited to 30 characters, not to make them too long.
• If you use any of the two old ways of inputting attributes, you can
set a flag for each element, so that you can optionally be asked about the
attributes not chosen in the "Use attributes" menu.
• A table template function, to quickly make tables.
• With "Tabs to rows" you can now optionally put table headers in first
row and/or column.
• "Rows to tabs" now follow the HTML code, not the line breaks in the file.
• A function to insert <BR> at the end of every line in a selection.
• A function to remove every <BR> in a selection.
• A function to insert <P> at empty lines in a selection.
• A function to make a HTML list from a *'d list.
• Undo is now easier, although you sometimes still have to make two "Undos"
to undo something.
• For attributes which can take any value, beginning and ending spaces are
no longer removed. Sometimes these spaces are wanted.
• When <A NAME="xxx"> or <MAP NAME="xxx"> is inserted, "#xxx" is added to
URL cache.
• New dialog box for cleaning up URL cache.
• Two identical colors can no longer be defined.
• New elements STRIKE and DFN.
• New element <INPUT TYPE=BUTTON> in extensions package. To be used
together with JavaScript.
• A couple of new attributes added so some elements.
• For the AREA element, a check is made that you use one of the attributes
HREF and NOHREF is used, but not both.
• The key binding for "Comment line" have been changed to ctrl-C-L to
conform with other modes.
===============================================================================
= What's new in version 1.0
===============================================================================
• A lot of new elements are included.
• It's possible to define colors to use as background color, text color etc.
from a color picker.
• Translation of accented letters (é, á etc.) to HTML entities and vice versa.
• The attributes of the elements are divided into required and optional ones.
If you skip a required one, no element is inserted. You can no longer make
elements like <A></A>.
• For some elements there is a separate key binding as well as menu item to
automatically skip all attributes.
• Improved behavior when the status bar is used to input attributes.
• Untagging works better.
• Marking of the file works better.
• Plus a number of other small changes.
===============================================================================
= Configuring HTML mode
===============================================================================
Home Page folder
To be able to check all links between your files, and to be able to insert
a link via a file dialog, you must set your Home Page folder. The idea is
that this folder, together with its subfolders, should contain all your
html files, and be a mirror of your home page at your server.
The Home Page folder is set via the menu Config -> App Paths.
Server URL
To be able to check all links between your files, and and to be able to insert
a link via a file dialog when you use the BASE element, you must set the
URL to your server. This is set via the HTML Utilities menu. In the dialog
box there are two field "Server URL" and "Path". If the URL to your home
page is http://www.somewhere.net/~myplace/ then set things like this:
Server URL: http://www.somewhere.net/
Path: ~myplace/
The URL has to be split in this way for HTML mode to correctly deal with
relative URLs within your server.
===============================================================================
= The HTML Packages
===============================================================================
The HTML elements are put into two packages, with can be loaded
separately.
HTML 3.2 - Contains everything in HTML 3.2 as in the specification by World
Wide Web Consortium released in June 1996.
Extensions - Contains everything in HTML 3.2 plus Netscape's extensions to
HTML. Some of Netscape's extensions are supported by other
browsers than Netscape Navigator, such as Mosaic and Internet
Explorer.
You have probably heard of HTML 3.0. It was a proposal for extending HTML
published in March 1995. HTML 3.0 was never widely deployed. HTML 3.2 on
the other hand adds widely deployed features such as tables, applets and
text flow around images, while providing backwards compatibility with the
old standard HTML 2.0.
===============================================================================
= How to use tab marks (•)
===============================================================================
When you insert HTML elements via the HTML menu you will see bullet
characters (•), called tab marks, being inserted after the element. These
tab marks are supposed to be a feature. The way to use them is the
following: Suppose you want to insert a header H1. First choose "Header 1"
from the menu (and give the attribute a value if you want). In the
document will now be inserted
<H1></H1>
•
with the current position between the H1 tags. Now first type the header
text:
<H1>My header</H1>
•
When you have done so, hit tab and the current position will jump to the
tab mark and delete it. You are now ready to continue typing.
If your document have been cluttered with tab marks, which you do not want
to use, you can remove them all with cmd-tab. If you do not want to use
tab marks at all, you can unset the flag useTabMarks via the menu Config ->
Current mode -> Flags. Then they will not be inserted.
================================================================================
= Text wrapping
================================================================================
It is very easy to insert a HTML element in an existing text. For example,
suppose there is a word "important" in the text which you want in boldface.
First select the word, then choose "Bold" from the menu (or type the
equivalent key binding) and "important" will be wrapped by the HTML tags to
give <B>important</B>. This behavior is the same for all elements which
are containers. Inserting a HTML element never deletes a selection.
===============================================================================
= Coloring
===============================================================================
The text in your HTML files can be colored in two different ways. By
default all HTML tags are colored blue, like
<A HREF="file.html">a link somewhere</A>
By setting the flag JavaScriptColoring the coloring changes. First of all,
the key words in JavaScript are colored magenta. But the coloring of the
HTML tags also changes, like
<INPUT TYPE="BUTTON" VALUE="pi" onClick="piKnapp(this.form)">
While this coloring is primarily intended to be used for files with
JavaScript, it can also be a better choice for files with very little text
and almost only HTML tags. Have in mind though that JavaScript keywords
(if else this...) will be colored also when they are part of ordinary
text.
================================================================================
= Marking the file
================================================================================
If you choose "mark file" in the marks menu, this menu will get a new item
for each header H1-6 in your file. You can then easily jump to a header by
selecting it in the menu. The menu items are truncated after 30
characters, to prevent them from becoming too long.
================================================================================
= How HTML mode behaves when it asks for attributes to a HTML element.
================================================================================
If a HTML element has attributes, it can be asked about in two different
ways, either in a dialog box with all attributes (the default), or in the
status bar. The flag useBigWindows determines which of these two ways you
want to use. If useBigWindows is set the attributes will be asked about in
a dialog box (the default), and otherwise in the status bar.
The attributes can be divided into seven categories: URLs, colors, target
windows, predefined choices (for example ALIGN=LEFT|CENTER|RIGHT), numbers,
flags and other. The category other contains attributes which can take any
value plus some which does not fit into any of the other categories.
Using dialog boxes.
If you set the flag inclEventHandler, JavaScript's event handlers will be
included in the dialog. By default they are not.
URLs - You can give the URL in three ways:
1) type the URL in the text box,
2) choose one from the menu with your URL cache,
3) select a file via a file dialog. (You are only allowed to
select a file in your home page folder.) The file you have
selected will be put in the menu.
It is probably much faster to type the URL, than selecting a
file from a file dialog, but the advantage about the file
dialog is that it will automatically determine the relative
path. If you use a BASE element in the current window it will
be noticed, and the relative path will be relative to it. If
you use the file dialog, you must set your home page folder and
if you use the BASE element you must also set your server URL
(see the section on how to configure HTML mode). You can only
make links to files in the home page folder, or any of its sub
folders, because otherwise the relative path would not be possible
to determine.
If you type a URL in the text box, it will be used, even if you
choose something from the menu.
Colors - You can give the color in three ways:
1) type a hexadecimal number #RRBBGG, which defines the color,
in the text box,
2) choose a color from the menu,
3) define a new color. The color so defined will be put in the
menu.
If you type something in the text box, it will be used, even if
you choose a color from the menu.
Window - You can give the target window in two ways:
1) type the window name in the text box,
2) choose a window name from the menu with your window cache.
If you type something in the text box, it will be used, even if
you choose a window from the menu.
Predefined choices - Select a choice from the menu.
Numbers - Attributes which take an integer value. The numbers will be
checked that they are in the valid range.
Other - Attributes which can take any value. Note that spaces in the
beginning and end of what you type are not removed. (This is
always done otherwise.) This is because sometimes such spaces
are wanted.
Flags - These are attributes which does not take any value. Check the
checkbox to use it.
If an element has very many attributes, the dialog box may have to be
divided into two, or possibly three, pages to fit your screen. Then there
will be a menu in the upper left corner of the dialog box to switch between
the pages. The dialog box is made as large as possible before being split
into two or three pages, so if your screen is large enough this will never
happen.
Alpha will complain if you forget a required attribute, or give a value to
an attribute which is not valid (not true in all cases but there are some
controls).
Using the status bar.
By default not all attributes are asked about. Use the menu Use
Attributes to determine which attributes you want to be asked about.
There you can also set a flag 'Ask for more?' for each element. If
you answer yes, the following will happen when you are asked about
attributes for this element:
*) You are first asked about the ones you have selected via this
menu.
*) Then you get a question "More attributes?"
*) If you answer yes, you will then be asked about the rest of the
attributes.
The idea is that you can put a kind of half way mark. First you
are asked about the ones you always want to be asked about, and
then you are optionally asked about the rest.
If you set the flag inclEventHandler, JavaScript's event handlers will
be asked about for those elements you have set 'Ask for more' to yes.
By default, Alpha beeps for each attribute it asks you about. You can turn
off the beeps by unsetting the flag promptNoisily.
You can simply type the value you want for an attribute (for colors you
can either type a number #RRBBGG or a color name), but some keys
have special functions to speed up your work.
tab - If you are asked about an attribute with predefined choices, for
example ALIGN=LEFT|CENTER|RIGHT, tab will match what you have
typed against your options, and complete what you have typed as
much as possible. Suppose you type C and then tab. The letters
ENTER will then automatically be inserted.
The same is true if you are asked for a URL, a target window or a
color. Tab will then match against your URL cache, the window
cache or the color names defined.
double tab - If there are predefined choices or you are asked for a URL, a
color or a target window, double tab will put up a list with
everything that match what you have typed so far. If you for
example have forgotten which choices there are, hit double tab
without typing anything to get a list with all possible choices.
Once you have chosen something from the list, Alpha immediately
jumps to ask you about the next attribute.
cmd-v Pastes the clipboard into the status bar. This is most useful if
you want to insert a URL which you for example has in another file.
ctrl-f - If you want to select a file via a file dialog, when asked for a
URL, or define a new color, when asked for a color, type ctrl-f
in the status bar. Once you have selected a file or defined a
new color, Alpha immediately jumps to ask you about the next
attribute.
escape - Deletes everything written.
ctrl-z - Cancel everything.
If there are predefined choices, only the letters which match a choice
can be typed. If you type anything else you just get a beep. Also, if
there are predefined choices, and you have typed a unique subset of one
of them and hit return, the rest will be added. For example, if the
choices are ALIGN=LEFT|CENTER|RIGHT and you type R and then return, you
will get ALIGN=RIGHT. If what you have typed is not unique, the
attribute will be skipped. There are a few cases when two letters are
needed to get a unique choice.
Giving no value at all to an attribute means that you skip it. If you
skip a required attribute, no tags will be inserted.
===============================================================================
= Editing JavaScript
===============================================================================
HTML mode has support for editing and coloring of JavaScript. To use this
you have to set some flags via the menu Config -> Current mode -> Flags,
which are not set by default. The following flags and variables concern
JavaScript:
JavaScriptColoring - when set, key words and comments in JavaScript will be
colored. The way the HTML tags are colored is also
changed, because the old way does not work well
together with JavaScript. For the HTML tags to be
colored nicely, all their attributes must be quoted.
elecLBrace - when set, the left braces, {, will be electric like in
C mode.
elecRBrace - when set, the right braces, }, will be electric like
in C mode.
JavaScriptColor - the color of the key words in JavaScript, if
JavaScriptColoring is set. Default is magenta.
stringColor - the color of text between quotes, if
JavaScriptColoring is set. Default is green.
inclEventHandler - when set, the event handlers (onFocus, onSelect etc.)
will appear in the attribute dialog. By default they
will not do so. Set this flag when you are editing
files with JavaScript.
If you do not have an American keyboard, you may have to set two key
bindings to be able to use the electric left and right braces. For
example, on my Swedish keyboard { is shift-opt-8 and } is shift-opt-9. To
use the electric braces I have to bind these keys with
bind '8' <so> electricLeft HTML
bind '9' <so> electricRight HTML
This is put in HTML's preference file, via the menu Config -> Current
mode -> Edit prefs. Change your key bindings similarly if needed.
===============================================================================
= The HTML Menu
===============================================================================
The menu described here is the menu for the Extensions package. In the
smaller package some menu items are absent.
The menus are dynamical. Holding down the option key changes some menu
items.
Send file to browser - Launches your browser and sends the document to it.
Help - Opens this file.
Palette - Makes a floating palette with the HTML menu. This palette
will be closed whenever the HTML menu is changed.
Packages - To choose which package with HTML elements to use. (See
the section abut the HTML packages.) If you change
package, the HTML menu is rebuilt.
HTML Utilities -
Colors - You can define and name colors to use as background, text
and link color etc. on your www page. Later when you insert a
element with a color attribute, you can choose the color
for the attribute from a menu. A set of eight basic colors
is provided by default.
Reveal color - If you move the current position to, or select any
part of, a color attribute in the document and then
choose "Reveal color", the number will be replaced
with its name, and if you choose "Reveal color"
again, the number appears again. This is useful if
you want to know what a cryptic color number stands
for. Do not forget that the browser only
understands the number so do not leave the name in
the document.
New color - To define and name a color, to use as color
attribute.
Change color - To change a color you have previously defined. If
you rename it, the old one will be removed.
Remove color - To remove colors previously defined.
Have in mind that once you have changed or removed
a color, Alpha does not remember the old one, and
therefore "Reveal color" does not work for it.
Character translation - To translate characters to and from their HTML
entities.
åäö -> HTML - translates characters to HTML entities.
HTML -> åäö - translates HTML entities to characters.
The characters which are translated are all you find
in the "small chars" and "capital chars" menus
(except eth, thorn and y´) plus the Spanish ¡ and
¿.
If some text is selected, the characters are
translated within the selection, otherwise they are
translated in the whole document.
URLs - Everything for managing the URL cache. HTML mode
accumulates a list of the URLs you use in your HREFs SRCs
etc., and saves the list across invocations of Alpha, so it
can help you to put in new URLs rapidly.
Add selection - Adds the current selection to the URL cache.
Add clipboard - Adds the clipboard to the URL cache.
Clean Up - After a while the URL cache can get very large, and
you may want to remove some URLs you do not need.
You will be presented with a dialog box with a
checkbox for each URL in your cache. Uncheck the
ones you want to remove. Click "Uncheck all" to,
guess what, uncheck all checkboxes. If there are
more URLs in your cache than fit the window, there
is a button "More" to take you to the next ones.
Clear - Removes all URLs from your cache.
Windows - Everything for managing the window cache. HTML mode
accumulates a list of the window names you use as target
windows , and saves the list across invocations of Alpha,
so it can help you to put in new window rapidly.
Clean Up - Works in the same way as Clean up for the URL cache.
Clear - Removes all windows from your cache.
Footers - A footer is a file with text which you automatically can
put into the BODY of the document when you create a new
document. To use this function,
*) first create a file with text which you want on many of
your pages, for example, directory buttons, your address
etc.
*) then choose "New footer" to define the file to be a footer.
When you later use "New document" you can select this file
from a menu, and its content will be put inside the BODY
element.
These files can of course contain any kind of text, but I
call them footers because my basic idea is that they should
contain things you put at the bottom of every page.
New footer - Presents you with a file dialog to pick a file with
a footer. This does not insert any text in your
document, it only defines a file to be a footer.
Remove footers - To remove footers previously defined. Note: this
does not delete the file, it is just no longer a
footer.
Insert footer - To insert the text in a footer file at the current
position.
Check links in - Functions to scan files in your home page folder and check
that all links, HREFs SRCs etc. point to files which
exist. The files which are scanned are the text files in
your home page folder which are HTML files (the ones which
have any of the suffixes as specified by the suffix
mapping). For this to be useful the files in your home
page folder must be a mirror of the files at your server.
If you use this function as intended you never have to
worry about dead links between your files anymore.
To use this function you have to set your Home Page folder
and Server URL. (See the section on how to configure HTML
mode.)
It works as follows: In every file scanned Alpha looks for
all HREFs, SRCs etc in the file. If you use the BASE
element it will be noticed and used to determine where a
link is pointing. For all links which point to a file in
your home page, Alpha checks if the file exists. Links
outside your home page are ignored. If a link includes an
anchor (href="file.html#anchor"), Alpha only checks that
the file exists, not if it contains an anchor with the
correct name.
If any invalid links are found, which points to files which
not exists, a window is opened where the lines look as
follows:
file.html ; Line 8: HREF="otherfile.html"
folder:file2.html ; Line 17: (BASE used) SRC="pic/coolpic.gif"
In the first column is the name of the file with the link,
including the path relative to your home page folder. In
the second column is the line number where the invalid link
is, and in the third column is the link itself. If it says
(BASE used) it means that the file contains a BASE element.
Use the up and down arrows to select a line in this window,
and carriage return to open the file and select the line
with the invalid link.
Limitation: If a link is within a comment, <!-- -->, it is
still checked.
home page - Check links in all html files in the home page
folder and its sub folders.
folder - To check links in all files in one folder. The sub
folders are not scanned. If you have very many
files, you may want to scan one folder at a time.
file - To check links in a single file.
Extend - To add new HTML elements, or new attributes to existing
element, to HTML mode. HTML is continuously evolving and
many browsers have introduced their own extensions. Here
you can add what is missing. New elements will be put in a
new submenu 'Custom' of the HTML menu.
You can only add new elements to the extensions package.
HTML 3.2 is complete as it is.
IMPORTANT! If you have previously defined new HTML elements
in the preferences file HTMLPrefs.tcl, make sure you remove
all of them and restart Alpha before using this function.
Otherwise there is a risk for conflicts between the two
ways of adding elements. If you have element definitions
in your prefs file and you already have loaded HTML mode,
you may have seen a warning message that the way to add new
elements has changed. This warning message is shown if you
call the function htmlNewElemVar of define the variable
htmlCustomMenuList. Remove all such things from the prefs
file and restart Alpha to avoid this warning.
New element - To add a new HTML element.
The elements are divided into three categories.
*) Normal. All which are not of one of the other
two categories.
*) Input element. A <INPUT TYPE="xxx"> element for
forms.
*) Plug-in. A plug-in using <EMBED>.
In the first dialog you specify the following.
*) The name of the element.
For 'normal' elements simply give the name, for
example to define <IMG> you would use 'IMG'.
For 'input elements' give the type, for example
to define <INPUT TYPE=CHECKBOX> use 'CHECKBOX'.
For 'plug-ins', use any descriptive name you
like.
*) If the element has a closing tag </TAG> or
not. This only applies to 'normal' ones as
neither <INPUT> nor <EMBED> has a closing tag.
*) A key binding for the element. Type one
character in the text box, and select which of the
modifiers shift, control, option and command you
want. It is no good idea to choose a key binding
which conflicts with another one, but if it turns
out that you have made a bad choice you can change
it later. If you do not want any key binding,
leave the text box blank.
Next you are asked to specify all the attributes to
the element. (I would say that it is a good idea to
write down the complete definition on a piece of
paper before you start.)
In the first dialog for each attribute you specify:
*) Its name.
*) If it is a required attribute or not.
*) Its type. Make sure you specify the correct
type for each attribute. For some types additional
information must be given. This is explained in
detail below.
The attributes you define will be displayed in the
dialog window as you go along.
Then click
*) OK when you have given the above information for the
current attribute.
*) 'No more attributes' *after* you have clicked OK
for the last attribute.
*) 'Remove last' to remove the last attribute you just
defined. You can remove them all one after another
to correct a mistake somewhere.
The different types are
*) 'Other'. Attributes that can take any value or
do not fit into any of the other seven
categories. No additional information is needed.
*) 'Number'. Attributes which take an integer
value. For these, a second dialog box is shown,
where you must specify the range of values
accepted. A minimum value must be given, but if
there is no maximum value, leave the text box for
this blank. You should also specify if the value
may be given in percent or not.
*) 'Choices'. Attributes which can only take
certain predefined choices, such as
ALIGN=LEFT|CENTER|RIGHT. For these attributes you
must specify all valid choices in a second dialog
box. The choices you define will be displayed in the
dialog window as you go along.
Click
*) 'OK' for each choice
*) 'No more choices' *after* you have clicked OK for the
last one.
*) 'Remove last' to remove the last choice you just
defined. You can remove them all one after another
to correct a mistake somewhere.
*) 'Flag'. Attributes which are flags and don't
take any value, like ISMAP for <IMG> or NOHREF for
<AREA>. These attributes will be checkboxes in the
attribute dialog. No additional information is
needed.
*) 'URL'. Attributes which take a URL as value, like
HREF, SRC etc. No additional information is needed.
*) 'Color'. Attributes which take a color as
value. No additional information is needed.
*) 'Window'. Attributes which take a target window
as value, like the attribute TARGET. No additional
information is needed.
*) 'Event handler'. Attributes which are event
handlers for JavaScript. No additional information
is needed.
Once you have specified all attributes you will be
presented with a final dialog box, where you are
asked which layout you want in the html documents.
(This layout only determines how the tags are
inserted in te text document, and affects, of
course, not how the text is displayed by the
browser.)
For elements without a closing tag you can specify
if you always want a carriage return inserted
before and/or after the tag.
For elements with a closing tag, you can choose
between four different layouts, whether you want
the tags to be on lines of their own and if you
want blank lines before and after them.
The new element is now saved, and after that, if
you use the status bar to input attributes, you
will be asked to select which optional attributes
you want to be asked about (as described here).
New attributes - To add new attributes to an existing HTML element.
You are first presented with a list from which you
choose an element to add attributes to. In this
list LI IN UL and LI IN OL are the LI element for
UL and OL lists respectively. BUTTON, CHECKBOX,
FILE, HIDDEN, IMAGE, PASSWORD, RADIO, RESET, SUBMIT
and TEXT are the INPUT element with different
TYPEs. LIVEAUDIO, LIVEVIDEO, QUICKTIME MOVIE,
QUICKTIME VR and REALAUDIO are different plug-ins.
All the rest are the usual names of the elements.
Then you specify the attributes in the same way as
you specify the attributes to a new element as
described above.
New choices - To add new choices to an attribute with predefined
choices. You are first presented with a list from
which you choose the element with the attribute to
add to. Second you are presented with a list from
which you select the attribute. Then you specify
new choices in the same way as described above.
Change key binding - To change a key binding for a custom element.
To remove the key binding, leave the text box
blank. Note that you can only change the key
bindings for the elements you have added yourself.
Change type and layout - To change the layout of a custom element,
to change whether it has a closing tag or not, and
to change its type (normal, input element or
plugin).
Remove attributes - To remove one or more of the attributes you have
added to some element, or to remove choices you
have added to an attribute. You are first
presented with a list of all elements you have
added attributes to. Select the element you want
and you are then presented with a list with all
attributes you have added to this element, where you
can select the ones you want to remove. If you
have only added new choices to an attribute, only
these choices are removed, not the attribute
itself.
There is no function to directly change an
attribute. (This is something I, most likely, will
add to the next version of HTML mode.) To change
an attribute you have to first remove it and then
add a new one again.
Remove additions - To remove an element you have added or to remove
additions you have made to a predefined element.
With this function you remove all additions you
have made to an element.
Select Container - Selects matching tags which include the current
position or selection. Repeated, it expands the selection.
Like the "Balance" item under the Edit menu. All tags
without a corresponding closing tag are ignored.
<opt>Select Opening - If the first tag to the left of the current position
is a tag without a corresponding closing tag, it is
selected. Repeated it jumps to the next one.
Untag - Removes a tag pair surrounding the current position or
selection. All tags without a corresponding closing tag
are ignored.
<opt>Untag and Select - Same as Untag, but the text inside the container is
selected. Use this if you want to change one container to
another.
Remove opening - If the first tag to the left of the current position
is a tag without a corresponding closing tag, it is
removed.
Change container - To change the attributes of the element enclosing the
current position or selection. A dialog box appears
where the current values of all attributes are shown.
Change the ones you want and a new tag will be inserted in
the text.
If the element you want to change contains anything HTML
mode does not understand, a warning message will first be
shown. If you decide to insert a new tag, everything HTML
mode does not understand will be removed.
If you are using JavaScript, the event handlers will only
be shown in the dialog if the flag inclEventHandler is set.
If inclEventHandler is not set, the event handlers are left
untouched in the document.
<opt>Change opening - Same as change container, but for an element with no
closing tag. The tag must be the first one to the left of
the current position to be found.
As you probably have noticed the logic for finding tags is
the same for "Select" "Untag/Remove" and "Change".
*) Container: the tags enclosing the current position or
selection. All tags without a corresponding closing tag
are ignored.
*) Opening: the first tag to the left must be a tag without
a corresponding closing tag.
It can be a good idea to first select the container or
opening tag, before removing or changing them, to make sure
you select the one you want.
Remove marks - Remove tab marks, (•). If some text is selected, the tab
marks are removed within the selection, otherwise they are
removed in the whole document.
Move files - To move files between different folders and automatically
update all links, which points to any of these files, in
every file in your home page folder, as well as updating
all links in the files moved.
To use this function you have to set your Home Page folder
and Server URL. (See the section on how to configure HTML
mode.)
*) First you are asked to select the folder which contains
the files you want to move.
*) Then you are asked to select the files you want to move
from this folder.
*) And then you are asked to select the destination folder.
Alpha now moves the files, and then asks you if you want to
update all links (this is the whole point of this function,
so a 'yes' should be appropriate). Alpha now scans all
HTML files (as determined by the suffix mapping) in your
home page folder and changes the links which need to be
changed. This may take a little while if you have very
many files, but should in most cases be a lot faster than
to make the changes manually.
Limitation: Links within comments , <!-- -->, are also
updated (which is a bug or a feature, depending on how you see
it).
Set Server URL - Set the URL to your server. See the section on how to
configure HTML mode.
Use Attributes - If you choose to input attributes from the status bar, you
can select which ones you want to be asked about. If you
choose to be asked about attributes in a dialog box you
will always be asked about everyone.
Note: This menu is disabled if you choose to input
attributes in a dialog box with all attributes (the
default).
For inputting attributes in the status bar, HTML mode is by
default set to ask about the ones which I think is the most
popular ones. If you choose to use the status bar
to input attributes I recommend that you go through the
list and choose the ones you want. In this list LI IN UL
and LI IN OL are the LI element for UL and OL lists
respectively. BUTTON, CHECKBOX, FILE, HIDDEN, IMAGE,
PASSWORD, RADIO, RESET, SUBMIT and TEXT are the INPUT
element with different TYPEs. LIVEAUDIO, LIVEVIDEO,
QUICKTIME MOVIE, QUICKTIME VR and REALAUDIO are different
plug-ins. All the rest are the usual names of the
elements.
There is also a question "Ask for more?" If you answer yes,
the following will happen when you are asked about
attributes for this element:
*) You are first asked about the ones you have selected via
this menu.
*) Then you get a question "More attributes?"
*) If you answer yes, you will then be asked about the rest
of the attributes.
The idea is that you can put a kind of half way mark.
First you are asked about the ones you always want to be
asked about, and then you are optionally asked about the
rest.
Note: The settings only affect the current HTML package.
You have to set everything for both packages even if an
element is in both of them. This is because some elements
have different attributes in the different packages.
New document - To insert the elements HTML, HEAD, TITLE, BODY in a new
HTML document. If you have a text file which you want to
make a HTML file of, this function lets you put the text
into the document's BODY element. Before choosing "New
document", open a new empty window or a text file which you
want to make a HTML document of.
First a dialog box is presented where you can:
*) give the document a title,
*) choose elements you want, which can be in the HEAD.
(These elements can of course be inserted later.)
*) choose a footer which is inserted in the end of the BODY
element. You define a file to be a footer via the menu
Footers.
When you are finished with the first dialog box
you are then asked about attributes for each element you
have chosen to put in the HEAD, and finally you are asked
about attributes for the BODY element.
The elements <HTML>, <HEAD>, <TITLE>, your chosen ones, and
<BODY> are now inserted in the text. If there were text in
the document, it is put in the BODY before the text in the
footer.
Now comes the part of the menu with all HTML elements. Some of the menu
items for the elements are dynamical. Hold down the option key and you see
that some menu items change. The new ones which appear insert the same
element as the other ones but with all attributes automatically skipped.
("No attr" in the menu stands for "no attributes"). The elements which
this concerns are <H1>-<H6>, <P>, <DIV>, <BR>, <HR>, <UL>, <OL>, <TR>, <TH>
and <TD>. This can be very useful if you for example are making a table
and only for a few cells want to set some attributes.
Headers - Insert section headers, from H1 to H6.
Header n - <Hn>.
<opt> Hn no attr - <Hn> without attributes.
Blocks and Dividers - These are various text-blocks and elements to control
line breaks.
Insert line breaks - Insert a <BR> tag at the end of each line in a
selection. To use this, first select the text where you
want the <BR> tags.
<opt>Remove line breaks - Removes all <BR> elements in a selection (not only
the ones at end of lines). To use this, first select the
text where you want to remove the <BR> tags.
Insert paragraphs - Insert <P> elements at each empty line in a selection,
and one just before the selection. To use this, first
select the text where you want the <P> elements.
Paragraph - <P>
<opt>P no attr - <P> without attributes.
Division - <DIV>
<opt>DIV no attr - <DIV> without attributes.
Block quote - <BLOCKQUOTE>
Address - <ADDRESS>
Center - <CENTER>
Preformatted - <PRE>
Multi column - <MULTICOL>
Spacing - <SPACER>
Line break - <BR>
<opt>BR no attr - <BR> without attributes.
Horizontal rule - <HR>
<opt>HR no attr - <HR> without attributes.
No linebreak - <NOBR>
Word break - <WBR>
Styles - Elements for different text styles. The ones above the
line in the middle of the menu are physical styles, while
the other ones are logical styles.
Font - <FONT>
Basefont - <BASEFONT>
Bold - <B>
Italic - <I>
Strike out - <STRIKE>
Underlined - <U>
Superscript - <SUP>
Subscript - <SUB>
Bigger - <BIG>
Smaller - <SMALL>
Typewriter - <TT>
Blinking - <BLINK>
Emphasis - <EM>
Strong - <STRONG>
Definition - <DFN>
Code - <CODE>
Variable - <VAR>
Citation - <CITE>
Keyboard - <KBD>
Sample - <SAMP>
Links - Hypertext links to and from other points, plus images.
Link or Anchor - <A>
Image - <IMG>
Plug-ins - Different plug-ins all using <EMBED>
General - General <EMBED> tag.
LiveAudio etc. - Plug-ins with more attributes to <EMBED>.
No embed - <NOEMBED>
Lists - All kinds of lists.
Make list - Makes list item , <LI>, of the text in a selection. If
your, for example, have a list
* item one
* item two
* item two
and a half
* item three
you can make HTML list items of them. First select the
lines with the items, before you choose "Make list"
from the menu. You are then asked about a string with
which all list items must begin, is this case *. You
cannot transform a list where the items begins with 1),
2) etc. All items must begin with the same string.
The result in this case will be
<LI>item one
<LI>item two
<LI>item two
and a half
<LI>item three
The element for the list itself is not inserted. The
idea is that you should be able to put new items into
an existing list in this way. To insert the list
element, select all items and make a list with zero
items.
Bulleted - <UL> list.
<opt>UL no attr - <UL> without attributes.
New bulleted item - <LI> with attributes corresponding to an <UL> list.
Ordered - <OL> list.
<opt>OL no attr - <OL> without attributes.
New ordered item - <LI> with attributes corresponding to an <OL> list.
Directory - <DIR> list.
Menu - <MENU> list.
New list item - <LI> without attributes.
Discursive - <DL> list.
New discursive entry - <DT> and <DD>
When you make a list you are first asked how many items you want, and
in some cases if you want to be asked about attributes for each list
item. You are then asked about attributes for the list element, and
finally, if you have said so, about attributes for each list item.
Forms - The elements for building forms.
Form - <FORM>
Text - <INPUT TYPE=TEXT>
Checkbox - <INPUT TYPE=CHECKBOX>
Button - <INPUT TYPE=BUTTON>
Radio - <INPUT TYPE=RADIO>
Submit - <INPUT TYPE=SUBMIT>
Reset - <INPUT TYPE=RESET>
Password - <INPUT TYPE=PASSWORD>
Hidden - <INPUT TYPE=HIDDEN>
Image - <INPUT TYPE=IMAGE>
File upload - <INPUT TYPE=FILE>
Select - <SELECT>
Option - <OPTION>
Textarea - <TEXTAREA>
Tables - The elements for building tables.
Table template - A function to easily build a table if it does not have
too complicated structure. You are presented with a
dialog box where you can specify:
*) the number of rows and columns you
want.
*) if you want table headers (TH) in the first row
and/or the first column. The rest will be table cells
(TD).
*) vertical and horizontal alignment for the rows.
These are attributes to the TR element and will be the
same for all rows.
When you are finished with this dialog box, you will be
asked about the attributes for the TABLE element,
before everything inserted in the document.
You cannot use this function to build more complicated
tables which requires attributes such as ROWSPAN and
COLSPAN.
Tabs to Rows - Takes a tab-delimited table and make HTML table rows of
them. To use this, first select the text to make table
rows of before you choose "Tabs to Rows" from the menu.
You will first be asked about attributes for
the table row (TR) element. These attributes will be
used for every row.
Then you are asked if you want table headers in the
first row and/or the first column.
Example: If you have the lines
a b c
d e f
in your document, "Tabs to Rows" will transform them into
<TR>
<TD>a</TD><TD>b</TD><TD>c</TD>
</TR>
<TR>
<TD>d</TD><TD>e</TD><TD>f</TD>
</TR>
Do not put more than one tab between each table cell.
Alpha makes one table cell for each tab in each row.
The TABLE element is not inserted. The idea is that
you should be able to insert new rows in an existing
table in this way.
It can be useful to change the tab size before using
this function.
<opt>Rows to Tabs - Converts table rows in a selection to a tab-delimited
format. (This is exactly "Tabs to Rows" backwards.)
To use this, first select the table rows you want to
convert. This function will remove the elements TR, TH
and TD, and put one tab between each table cell.
Everything in each table row will be put on one line.
If the table contains cells of varying length you may
have to change the tab size for the table to look
pretty.
Table - <TABLE>
Row - <TR>
<opt>TR no attr - <TR> without attributes.
Header - <TH>
<opt>TH no attr - <TH> without attributes.
Cell - <TD>
<opt>TD no attr - <TD> without attributes.
Caption - <CAPTION>
Frames - The elements for building frames.
New doc. with frames - The same as New document, with the difference
that BODY is replaced by FRAMESET.
Frameset - <FRAMESET>
Frame - <FRAME>
No frames - <NOFRAMES>
Image maps - The elements for client side image maps.
Map - <MAP>
Area - <AREA>
Java - The elements for Java and JavaScript.
Applet - <APPLET>
Parameter - <PARAM>
Script - <SCRIPT>
No script - <NOSCRIPT>
Other - Things which do not fit elsewhere.
Comment - Inserts a HTML comment <!-- -->
Base - <BASE>
Isindex - <ISINDEX>
Link - <LINK>
Meta - <META>
Comment line - Inserts a commented line with = signs. Use it if you
want to divide the document into different parts. The
key binding for this is ctrl-C-L.
Character Entities - The entities for characters, for example ü is ü.
All possible entities are divided into three submenus. To
pick a character from these menus is only useful if you
only want a single character. If you write in a language
which use a lot of these characters, type them in the
document as usual and then use the character translation.
Add - Letters can be added to the short list at the top.
Choose the ones you want from a list pick.
Default - Sets the short list at the top back to the default
setting, less than, greater than, ampersand.
Clear - Removes all letters from the short list.
small chars - Inserts the character entity for a letter, for example,
á inserts á.
capital chars - Inserts the character entity for a capital letter.
other chars - Character entities for other characters.
The reason for the accent being beside some letters is that the font
used in the menus, Chicago, does not have these accented letters.
================================================================================
= Key Bindings
================================================================================
All HTML elements have got their own key bindings. You can find them all in
the HTML menu. I have tried to group them as much as possible so that they
are easy to learn.
Some of the key bindings:
tab Jump to the next tab mark (•)
shift-tab Jump to the previous tab mark (•)
opt-tab Literal tab
cmd-tab Remove all •
shift-ctl-opt-, inserts <
shift-ctl-opt-. inserts >
shift-ctl-opt-7 inserts &
All other key bindings can be found in the menu.
===============================================================================
= Command-double-click
===============================================================================
Command-double-clicking on an absolute URL sends the URL to your web
browser. This is not specific for the HTML mode, it is a general feature
of Alpha.
Command-double-clicking on a relative URL opens a new window with the file
if the file exists in your home page folder and it is a text file. If it
does not exist, a new empty window can be opened with the name of the file.
This window is automatically saved in the right place, and if necessary new
folders are created. Thus, if you are making a new set of pages, you can
make links to the ones you have not written yet, and then by
cmd-double-clicking let Alpha make empty files which are saved where you
want them.
================================================================================
= User-Settable Flags and Variables
================================================================================
HTML mode is highly customizable. You can modify its behavior in several
ways. Most of the flags and variables are discussed in other places in
this manual, in the context where they are used.
Flags
The flags can be set in the menu Config -> Current mode -> Flags...
JavaScriptColoring - if set, key words and comments in JavaScript will be
colored. The way the HTML tags are colored is
also changed, because the old way do not work
well together with JavaScript. The default is
0, do not color JavaScript's key words.
browseInForeground - if set, when you send a file to the browser, the
browser will be brought to the foreground. If you
have lots of screen space and are just validating,
uncheck this flag to leave the browser in the
background and Alpha in the foreground. The
default is 1, bring browser to foreground.
elecLBrace - when set, the left braces, {, will be electric like
in C mode. Set this if you are editing JavaScript.
The default is 0, { is not electric.
elecRBrace - when set, the right braces, }, will be electric
like in C mode. Set this if you are editing
JavaScript. The default is 0, } is not electric.
lidtAreContainers - If set, <LI>, <DT> and <DD> have
corresponding closing tags. If not set the optional
closing tags are skipped. The default is 0, do not
insert a closing tag.
inclEventHandler - when set, the event handlers (onFocus onSelect
etc.) will appear in the attribute dialog. The
default is 0, no event handlers in attribute dialog.
pIsContainer - If set, the <P> element has a corresponding closing tag.
If not set it does not. The default is 1, it has a
closing tag.
promptNoisily - If you input element attributes from the status
bar, Alpha will beep when asking for element
attribute information there. The default is 1, do
beep. The value of this flag is only used if
useBigWindows is not set.
useBigWindows - If set, element attributes will be asked about in a
a dialog box with all attributes, otherwise they
will be asked about in the status bar. The default
is 1, use dialog boxes.
useLowerCase - If set, elements will be like <P>; if 1, like <p>.
The default is 0, upper case.
useTabMarks - If set , will not insert the • characters. The
default is 1, to insert them.
Variables
The variables can be set in the menu Config -> Current mode -> Flags...
prefixString - The string to begin a comment, and the one to
suffixString - end a comment. Change these if you want to make
comments in JavaScript, but do not forget to change
them back when you want to make a HTML comment
again.
JavaScriptColor - The color of keywords in JavaScript. These are
only colored if the flag JavaScriptColoring is set.
The default is magenta.
stringColor - The color of everything between quotes. Only used
if the flag JavaScriptColoring is set.
The default is green.
tagColor - The color of the HTML tags.
The default is blue.
wordBreak - These two control which characters build up words,
wordBreakPreface -
wrapBreak - and these ones control word wrapping.
wrapBreakPreface -
Read about them in the general manual if you want to
change them (should usually not be needed).
Internal variable which you may change
HTMLwords - keywords which you want to be highlighted when
editing HTML in Alpha. They are colored with the
same color as the HTML elements. If you want the
words "cool" and "nifty" to be highlighted, add the
following to your preferences file:
lappend HTMLwords cool nifty
htmlColorizing
The first line defines the words, and the second one
tells Alpha to color them.
The default is {}, i.e. no keywords.
Defining your own key bindings.
It is possible to change the key bindings by using the Alpha "bind" command.
Here are some simple bindings, included as samples of what is possible.
For example, if you don't use an American keyboard, you maybe want to
change the bindings for < > and & to where they actually are on
your keyboard. For example, to get it right on my Swedish keyboard I put
the following lines in my preferences file.
bind '<' <o> {insertText "<\;"} HTML
bind '<' <so> {insertText ">\;"} HTML
bind '6' <so> {insertText "&\;"} HTML
Read more about how to define your own key bindings in the general manual.
===============================================================================
= HTML Tutorials, References and Validation
===============================================================================
A Beginner's Guide To HTML,
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
Introducing HTML 3.2
http://www.w3.org/pub/WWW/MarkUp/Wilbur/
Introduction to HTML and URLs
http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/intro.html
Guide to HTML Commands
http://www.woodhill.co.uk/html/html.htm
Creating HTML - A simple guide
http://www.netusa1.net/~jbornema/html.html
Creating Net Sites
http://home.netscape.com/assist/net_sites/
The Bare Bones Guide to HTML
http://werbach.com/barebones/
JavaScript
http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/
HTML Validation
http://www.webtechs.com/html-val-svc/
